<template>

  <div class="aaaa">

    <p>多选框</p>

    <ul>

      <li v-for="(item,index) in checkboxList" :key="index" @click="check(item,index)">
        <div :class="checkbox.includes(index)?'active':''"></div>
        <p>{{item.id}}</p>
        <p>{{item.ids}}</p>
      </li>

    </ul>

    <button @click="letsGetThisFuckingCheck">{{isCheckAll?'取消全选':'选择全部'}}</button>

    <button @click="checkOpposite">提交</button>

  </div>

</template>

 

<script>
export default {
  components: {},

  data() {
    return {
      checkbox: [],
      datalist: [],
      checkboxList: [
        { checked: false, id: "1某个元素", ids: "1" },
        { checked: false, id: "2某个元素", ids: "2" },
        { checked: false, id: "3某个元素", ids: "3" },
        { checked: false, id: "4某个元素", ids: "4" },
        { checked: false, id: "5某个元素", ids: "5" }
      ]
    };
  },

  created() {
    this.datalist = this.checkboxList;
  },

  computed: {
    //判断是否全部选中

    isCheckAll() {
      if (this.checkbox.length == this.checkboxList.length) {
        return true;
      }

      return false;
    }
  },

  methods: {
    //单选

    select(i) {
      this.selectedNum = i;
    },

    //多选

    check(item, index) {
      var idx = this.checkbox.indexOf(index);

      //如果已经选中了，那就取消选中，如果没有，则选中
      if (idx > -1) {
        this.$set(item, "checked", false);
        this.checkbox.splice(idx, 1);
        //      this.datalist.splice(idx,1);
      } else {
        this.$set(item, "checked", true);
        this.checkbox.push(index);
      }
      console.log(this.checkboxList);
    },

    letsGetThisFuckingCheck() {
      if (this.isCheckAll) {
        this.clearCheckbox();
      } else {
        this.checkAll();
      }
    },

    //选中全部

    checkAll() {
      var len = this.checkboxList.length;

      this.checkbox = [];

      for (var i = 0; i < len; i++) {
        this.$set(this.checkboxList[i], "checked", true);
        this.checkbox.push(i);
      }
      this.datalist = this.checkboxList;
      console.log(this.checkboxList);
    },

    //清空选择

    clearCheckbox() {
      this.checkbox = [];
      this.datalist = [];
      console.log(this.datalist);
    },

    //反选

    checkOpposite() {
      //    this.checkboxList.forEach(item => {
      //      let index;
      //      if (
      //        (index = this.datalist.findIndex(
      //          innerItem => innerItem.checked === item.checked
      //        )) >= 0
      //      ) {
      //        this.datalist.splice(index, 1);
      //      }
      //    });

      var checked = false; //要删除的id
      var newArr = this.checkboxList.filter(function(obj) {
        return checked !== obj.checked;
      });
      //console.log(JSON.stringify(newArr));

      console.log(newArr);
    }
  }
};
</script>

<style scoped>
.aaaa{
  position: absolute;
  top:40px;
}
li {
  display: inline-block;

  font-size: 16px;

  padding: 5px;

  background-color: #e6e6e6;

  margin: 5px 10px;

  cursor: pointer;
  box-orient: vertical;
  flex-direction: column;
}
span {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
}
.active {
  border: 2px solid red;
}
</style>